<template>
  <div class="header">
    <div class="headerLeft">
    	<div class="iconfont backIcon">&#xe603;</div>
    </div>
    <div class="headerInput">
    	<span class="iconfont">&#xe602;</span>
    	输入城市/景点/游玩主题</div>
    <router-link to="/city">
	    <div class="headerRight">
	    	{{this.currentCity}}
	    	<span class="iconfont arrowIcon">&#xe61d;</span>
	    </div>
    </router-link>
  </div>
</template>

<script>
	import { mapState } from 'vuex'
  export default{
  	name: 'homeHeader',
  	computed: {
  		...mapState({
  			currentCity:'city'
  		})
  	}
  }
</script>

<style lang="stylus" scoped="scoped">
/*样式中引用样式@import*/
 /*   两个display inline 的元素之间会有2px的距离*/
@import "~styles/varibles.styl";
	.header
	   height:0.86rem
	   line-height:$headerHeight
	   display:flex
	   background:$bkColor
	   position:relative
	   top:0
	   color:#fff
	   .headerLeft
	     float:left
	     width:.64rem
	     .backIcon
	      font-size:.5rem
	      text-align:center
	   .headerInput
	     flex:1
	     background:#fff
	     margin-top:0.12rem
	     margin-left:.2rem
	     height:.64rem
	     line-height:.64rem
	     color:#ccc
	     padding-left:.2rem
	     border-radius:.1rem
	   .headerRight
	     min-width:1.24rem
	     padding:0 .1rem
	     float:right
	     text-align:center
	     color:#fff
	     .arrowIcon
	      font-size:.24rem
	      margin-left:-.04rem
	  
</style>